<script setup lang="ts">
import { onMounted,ref } from 'vue'
import MarsMap from '@components/mars-work/mars-map.vue'
import Webtab from '@components/webView/index.vue'
// import WebTabs from '@components/webView/Tabs/index.vue'
import Mobtab from '@components/mobileView/index.vue'

// 地图构造完成回调
const onMapload = async () => {
}
let screenWidth = ref(0)
const adjustLayout = () => {
  screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}

onMounted(() => {
  adjustLayout();
  window.addEventListener('resize', adjustLayout);
})
</script>

<template>
  <div id="centerDiv" class="mapcontainer">
    <MarsMap @onload="onMapload" />
    <div v-show="screenWidth>720">
      <Webtab></Webtab>
    </div>
    <div v-show="screenWidth<=720">
      <Mobtab></Mobtab>
    </div>
  </div>
</template>

<style scoped></style>
